<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import PersonalNav from "@/components/PersonalNav.vue";
import axios from "axios";
export default {
  name: "Personal",
  components: {PersonalNav, Footer, Header},
  data:function (){
    return{
      userInfo:'',
      die_time:'',
      last_time:'',
      profile:'',
      phone:'',
    }
  },
  mounted() {
    this.get_userInfo()
  },
  methods:{
    get_userInfo(){
      axios
          .get('/api/users/me/')
          .then(response=>{
            this.userInfo = response.data
            this.profile = this.userInfo.profile
            if (this.userInfo.profile.phone){
              this.phone =  this.userInfo.profile.phone
            }
            else {
              this.phone = '暂未设置手机号'
            }
            if (this.profile.is_upgrade && this.profile.expire_time){
              console.log(this.profile.is_upgrade)
              console.log(this.profile.expire_time)
              this.formatDieTime(this.profile.expire_time)
              this.calculateMembershipDaysLeft(this.userInfo.profile.expire_time)
            }
          })
    },
    formatDieTime(dateTimeString) {
    // 创建一个新的 Date 对象（假设 dateTimeString 是有效的 ISO 8601 字符串）
    const date = new Date(dateTimeString);

    // 使用 Intl.DateTimeFormat 来格式化日期
    const formatter = new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });

    // 获取格式化的日期字符串
    this.die_time = formatter.format(date);
  },
    calculateMembershipDaysLeft(expiryDateString) {
      // 将到期日期字符串转换为 Date 对象
      const expiryDate = new Date(expiryDateString);
      // 获取今天的日期
      const today = new Date();
      // 计算时间差（毫秒）
      const timeDifference = expiryDate - today;
      // 将时间差转换为天数（1天 = 1000毫秒 * 60秒 * 60分钟 * 24小时）
      const daysLeft = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
      // 更新组件数据
      this.last_time = daysLeft;
    },
  },

}
</script>

<template>
<div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
  <Header></Header>
      <div id="main" class="bg-primary-300 p-6 text-black">
        <div class="rounded bg-white mx-4 my-4 py-6 ">
            <div class="px-6">
                <h1 class="text-lg font-semibold">个人中心</h1>
            </div>
        </div>
        <div class="rounded bg-white mx-4 mt-4 py-6 ">
            <PersonalNav></PersonalNav>
            <div class="mt-4 mb-3 ">
            <div class="not-prose relative ">
                <div class="ml-4 text-lg">
                <div class="py-2">
                    用户名： {{userInfo.username}}
                </div>
                <div  class="py-2">
                    手机号：{{phone}}
                </div>
                <div v-if="profile.is_upgrade === 1" class="py-2">
                    会员状态：会员
                </div>
                <div v-else class="py-2">
                    会员状态：非会员，<a href="/member_card" style="color: blue">购买会员请点击我</a>
                </div>

                <div class="py-2">
                    到期时间：{{die_time}}
                    剩余时间：{{last_time}}天,
                    <a href="/member_card" style="color: blue">续费请点击我</a>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
  <Footer></Footer>
   </div>
</template>

<style scoped lang="scss">

</style>